<!-- 商品列表 -->
<template>
  <div class="pageContent">
    <!-- 列表头部 -->
    <div class="userTitle">
      <div class="userListOne">用户列表</div>
      <div class="userListTwo">
        <el-button @click="getUserList">刷新</el-button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="userListContent">
      <!-- 筛选查询 -->
      <div class="userSift">
        <el-collapse v-model="activeNames" style="border: 1px solid #e4e4e4;" class="chaxun">
          <el-collapse-item title="筛选查询" name="1">
            <div class="siftContent">
              <el-form :inline="true" class="demo-form-inline" :model="sieving">
                <el-form-item label="用户ID">
                  <el-input v-model="sieving.userName" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="sieving.phonenumber" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称">
                  <el-input v-model="sieving.nickName" placeholder="用户昵称"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="siftButton">
              <el-button type="primary" @click="resetInput">重置</el-button>
              <el-button @click="getUserList">筛选</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 数据列表 -->
      <div class="userListData">
        <div class="dataHead">
          <div class="dataHead-left">数据列表</div>
          <div class="dataHead-right">
          </div>
        </div>
        <div>
          <el-table border style="width: 100%" :data="tableData">
            <el-table-column prop="userId" type="selection" width="50" align="center">
            </el-table-column>
            <el-table-column label="序号" width="70" align="center" type="index">
              <template slot-scope="scope">
                {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
              </template>
            </el-table-column>
            <el-table-column label="用户昵称" align="center" width="180" prop="nickName">
            </el-table-column>
            <el-table-column prop="userName" label="用户账号" width="120" align="center">
            </el-table-column>
            <el-table-column prop="phonenumber" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间" align="center">
            </el-table-column>
            <el-table-column prop="price" label="消费金额" align="center">
            </el-table-column>
            <el-table-column prop="status" label="账户可用状态" align="center">
              <template v-slot="scoped">
                <el-switch :value="scoped.row.status == 0" @change="isGrounding(scoped.row.userId)" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" align="center">
              <template v-slot="scoped">
                <router-link to=""><span @click="delBtn(scoped.row.userId)">删除</span></router-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 分页 -->
      <div style="margin: 30px auto">
        <el-pagination background align="center" :page-size="pageSize" :current-page="currentPage"
          @current-change="handleCurrentChange" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
<script>
import { mapActions } from "vuex";
export default {
  name: "userList",
  data() {
    return {
      activeNames: ["1"],
      value1: "", //按时间筛选时候的容器
      tableData: [], //表格数据
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sieving: {
        userName: '', //用户账号
        phonenumber: '', // 手机号
        nickName: '',  //昵称
        createTime: '' //注册时间
      }
    };
  },
  created() {
    this.getUserList();
  },
  mounted() { },
  methods: {
    ...mapActions("user", ["GetUserList", "EditUserInfo", "DeleteUser"]),
    // 获取用户数据
    getUserList() {
      let obj = {
        currentPage: this.currentPage, //必传参数当前页
        pageSize: this.pageSize, //必传参数每页长度
        userName: this.sieving.userName.trim(),
        phonenumber: this.sieving.phonenumber.trim(),
        nickName: this.sieving.nickName.trim()
      }

      this.GetUserList(obj).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    //判断账户是否可用
    isGrounding(userId) {
      console.log(userId);
      let obj = this.tableData.find((item) => {
        return item.userId == userId;
      });
      obj.status = obj.status == 1 ? 0 : 1;
      console.log("obj", obj);
      this.EditUserInfo(obj).then((res) => {
        // console.log(res);
      });
    },
    // 判断当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getUserList();
    },
    resetInput() {
      this.sieving.userName = ""
      this.sieving.phonenumber = ""
      this.sieving.nickName = ""
      this.getUserList();
    },
    delBtn(delId) {
      let idList = []
      idList.push(delId)
      this.DeleteUser({ idList }).then(res => {
        console.log(res);
        this.getUserList()
        this.$message('删除成功')
      })
    },


  },
};
</script>
  
<style scoped>
html div {
  font-size: 14px;
}

::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
  color: #409eff;
}

.pageContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* overflow-y: scroll; */
}

.userTitle {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
}

.userListOne {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}

.userListTwo {
  margin-right: 20px;
}

.userListTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}

.userListContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userTag {
  width: 95%;
  margin: 30px 0;
}

.userTag .beforeTag {
  color: #2c3e50 !important;
  margin-right: 20px;
  cursor: pointer;
}

.userSift {
  width: 95%;
  margin-top: 30px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e4e4e4;
}

::v-deep .el-collapse {
  width: 100%;
}

::v-deep .el-collapse-item__header {
  box-sizing: border-box;
  padding: 0 18px;
  background-color: #f0f0f0;
}

.siftContent {
  box-sizing: border-box;
  padding: 30px 20px 0;
}

.el-form-item {
  margin-right: 158px;
}

.siftButton {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.siftButton .el-button {
  margin-right: 20px;
  padding: 12px 35px;
}

.userListData {
  width: 95%;
  margin-top: 25px;
  background-color: #f0f0f0;
}

.dataHead {
  height: 50px;
  box-sizing: border-box;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dataHead-right {
  display: flex;
  align-items: center;
}

.dataHead-right .el-form-item .el-select {
  height: 34px;
  width: 130px;
}

::v-deep .dataHead-right .el-form-item .el-select .el-input__inner {
  line-height: 34px;
  height: 34px;
}

.dataHead-right .el-form-item {
  margin: 0 15px 0 0;
}

::v-deep .cell img {
  width: 100px;
  height: 100px;
}
</style>